/**
 * This function is being called by the Mesh component when starting animation
 * via componentReference.startAni() or when prop 'aniauto' is provided (true)
 */
const rotateCubeFaster = (obj) => {
	let rAF = 0;
	let doRotate = false;

	function onStart() {
		startRotating();
	}

	function startRotating() {
		doRotate = true;
		rAF = requestAnimationFrame(rotate);
	}

	function rotate() {
		if (doRotate) {
			obj.rotation.x += 0.05;
			obj.rotation.y += 0.05;
			obj.rotation.z += 0.05;
			rAF = requestAnimationFrame(rotate);
		}
	}

	function onDestroy() {
		doRotate = false;
		cancelAnimationFrame(rAF);
	}

	return {
		onStart: onStart,
		onDestroy: onDestroy
	};
};

const rotateCube = (obj: any) => {
	let rAF = 0;
	let doRotate = false;

	function onStart() {
		startRotating();
	}

	function startRotating() {
		doRotate = true;
		rAF = requestAnimationFrame(rotate);
	}

	function rotate() {
		if (doRotate) {
			obj.rotation.x += 0.01;
			obj.rotation.y += 0.01;
			obj.rotation.z += 0.01;
			rAF = requestAnimationFrame(rotate);
		}
	}

	function onDestroy() {
		doRotate = false;
		cancelAnimationFrame(rAF);
	}

	return {
		onStart: onStart,
		onDestroy: onDestroy
	};
};

const handleOnClick = () => {
	console.log("Hi, I was triggered from app's scope!");
};
const triggerOnClickAni = (e) => {
	console.log("Hi, I was triggered from app's scope!");
	console.log(e);
	let obj = e.detail.target;
	console.log(obj);

	let animetime = anime.timeline({
		easing: 'easeOutElastic(1.5,.3)',
		duration: 1500
	});
	animetime
		.add({
			targets: obj.material,
			opacity: 1
		})
		.add(
			{
				targets: obj.rotation,
				change: function () {
					obj.rotation.y += 0.1;
					obj.rotation.z += 0.1;
					obj.rotation.x += 0.1;
				}
			},
			0
		)
		.add({
			targets: obj.scale,
			x: 1.5,
			y: 1.5,
			z: 1.2
		})

		.add(
			{
				targets: obj.material.color,
				b: 0.33,
				g: 1,
				r: 0.33
			},
			0
		)
		.add(
			{
				targets: obj.position,
				x: 1,
				y: 0.9
			},
			0
		)
		.add(
			{
				targets: obj.position,
				x: -1,
				y: -0.5
			},
			600
		);
	// gsap.to(obj.scale, {
	//   duration: 1,
	//   x: 1.5,
	//   y: 1.5,
	//   z: 1.5,
	//   ease: 'elastic.out',
	// },0)
};

const triggerOnOverAni = (e) => {
	let obj = e.detail.target;

	let animetime = anime.timeline({
		easing: 'easeOutElastic(1.5,.3)',
		duration: 800
	});
	animetime
		// .add(
		//   {
		//     targets: obj.rotation,
		//     change: function () {
		//       obj.rotation.y += 0.1
		//       obj.rotation.z += 0.2
		//       obj.rotation.x += 0.1
		//     },
		//   },
		//   0
		// )
		.add(
			{
				targets: obj.scale,
				x: 1.5,
				y: 1.5,
				z: 1.2
			},
			0
		)

		.add(
			{
				targets: obj.material.color,
				b: 1,
				g: 0.5,
				r: 0.33
			},
			0
		)
		.add(
			{
				targets: obj.material,
				transparent: true
			},
			0
		)
		.add(
			{
				targets: obj.material,
				opacity: 0.2
			},
			0
		);
	// console.log(obj)
};
import { Vector3 } from 'svelthree';
import anime from 'animejs';
const triggerOnOutAni = (e) => {
	let obj = e.detail.target;

	let animetime = anime.timeline({
		easing: 'easeOutElastic(1.5,.3)',
		duration: 800
	});
	animetime
		.add(
			{
				targets: obj.scale,
				x: 1,
				y: 1,
				z: 1
			},
			0
		)
		.add(
			{
				targets: obj.position,
				x: 0,
				y: 0
			},
			0
		)
		.add(
			{
				targets: obj.material.color,
				b: 0,
				g: 0.12456465,
				r: 1
			},
			0
		)
		.add(
			{
				targets: obj.material,
				transparent: false
			},
			0
		)
		.add(
			{
				targets: obj.material,
				opacity: 1
			},
			0
		);
};

function onPointerMove(e) {
	let obj = e.detail.target;

	let unpr = new Vector3().copy(e.detail.unprojected);
	let unprwtl = obj.worldToLocal(unpr).add(new Vector3(0, 0, 1));
	obj.lookAt(unprwtl);
}
const rotateCubeZ = (obj) => {
	let rAF = 0;
	let doRotate = false;

	function onStart() {
		startRotating();
	}

	function startRotating() {
		doRotate = true;
		rAF = requestAnimationFrame(rotate);
	}

	function rotate() {
		if (doRotate) {
			obj.rotation.z += 0.05;
			rAF = requestAnimationFrame(rotate);
		}
	}

	function onDestroy() {
		doRotate = false;
		cancelAnimationFrame(rAF);
	}

	return {
		onStart: onStart,
		onDestroy: onDestroy
	};
};
export {
	rotateCube,
	rotateCubeZ,
	rotateCubeFaster,
	triggerOnOutAni,
	triggerOnOverAni,
	triggerOnClickAni,
	handleOnClick,
	onPointerMove
};
